<template >
    <!-- <div> -->
        <el-button :size="size" :type="type" :icon="icon" :disabled="isDisabled" @click="download()">{{ title }}</el-button>
        <!-- <div ref="word" class="docWrap"></div> -->
    <!-- </div> -->
</template>
<script>
import servicesApi from '@/services/servicesApi';
import { debounce } from 'lodash';
import { addDynamicRoute } from '@/router'
let docxx = require('docx-preview');
export default {
    name: 'FileDown',
    data() {
        return {
            // title: '文献模板下载',
            // apiHost: '',
            isDisabled: false,  //默认可以点击
            res: null,
            FileName: null,
        }
    },
    created() {
        // this.apiHost = apiHost + '/student/wenxian'
        // console.log('created子组件', this.FileInfo);
    },
    activated() {
        // console.log(this.FileName)
        // console.log(this.res)
    },
    mounted() {
        // console.log('子组件', this.FileInfo);
    },
    props: {
        preView: { //是预览还是下载
            type: [Boolean],
            required: false,
            default: false
        },
        apiUrl: { //接口路径
            type: [String],
            required: true,
            default: 'student/wenxian'
        },
        fileId: { //文件id
            type: [String, Number],
            required: true,
            default: '26'
        },
        title: {
            type: [String],
            required: false,
            default: '下载'
        },
        size: {
            type: [String],
            required: false,
            default: 'medium'
        },
        type: {
            type: [String],
            required: false,
            default: 'success'
        },
        icon: {
            type: [String],
            required: false,
            default: 'el-icon-download'
        },
        FileInfo: {
            type: [Object],
            required: false,
            default: function() {
                return {
                    filename: '毕业论文管理系统简易使用手册',
                    path: 'student/wenxian',
                    suffix: 'docx'
                }
            }
        },
    },
    watch: {
        FileInfo(val) { // 函数名是要监听的属性
            
            // console.log('监听的值=%s', val)
            this.res = null
            // this.$nextTick(() => {
                //  延时到下一帧才开始，也就是页面刚刚渲染结束！！
                // this.$refs.resetForm.clearValidate() // 重置表单，清空校验信息
            // })
        }
    },
    methods: {
        // 子级
        childHandle(row) {
            // console.log(row)
            // 路由参数
            const routeParams = {
                routeName: `${this.$route.name}__${row.id}`,
                title: `${this.$route.meta.title}-${row.filename+'-预览'}`,
                path: 'components/FileView',
                params: {
                    res: this.res,
                    path: this.$route.name,
                    filename: this.FileName
                }
            }
            // 动态路由
            addDynamicRoute(routeParams, this.$router)
        },
        fileView() {
            let option = {
                className: 'docx', //默认和文档样式类的类名/前缀
                inWrapper: true, //启用围绕文档内容呈现包装器
                ignoreWidth: false, //禁用页面的渲染宽度
                ignoreHeight: false, //禁用页面的渲染高度
                ignoreFonts: false, //禁用字体渲染
                breakPages: true, //在分页符上启用分页
                ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
                experimental: false, //启用实验功能（制表符停止计算）
                trimXmlDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明
                useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL
                useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
                showChanges: false, //启用文档更改的实验渲染（插入/删除）
                debug: false, //启用额外的日志记录
            }
            // console.log(this.res.data)
            // docxx.renderAsync(this.res.data, this.$refs.word, null, option)
            this.isDisabled = false;
            // console.log(this.FileInfo)
            this.childHandle(this.FileInfo)
        },
        fileDown(FileName) {
            // console.log(this.res.data)
            const blob = new Blob([this.res.data], {
                type: 'application/octet-stream'
            })
            // console.log(blob)
            const downloadElement = document.createElement('a')
            // 创建下载的链接
            // 兼容不同浏览器的URL对象
            const url = window.URL || window.webkitURL || window.moxURL;
            const href = url.createObjectURL(blob)
            // console.log(href)
            downloadElement.href = href
            // 下载后文件名
            downloadElement.download = FileName
            document.body.appendChild(downloadElement)
            // 点击下载
            downloadElement.click()
            // 下载完成移除元素
            document.body.removeChild(downloadElement)
            // 释放掉blob对象
            url.revokeObjectURL(href)
            //下载完成 可以重新点击按钮下载
            this.isDisabled = false;
        },
        //下载文件
        download: debounce(function() {

            // console.log(this.FileInfo.id)
             this.FileName = this.FileInfo.filename + '.' + this.FileInfo.suffix
            if (this.title.indexOf('模板下载')>0) { //模板下载的文件名
                // console.log(this.title.indexOf('模板下载'))
                this.FileName = this.title.substring(0, this.title.length-2) + '.' + this.FileInfo.suffix
            }
            // console.log(this.FileName)
            //按钮置灰 不可点击
            this.isDisabled = true
            let form = {  url: this.apiUrl,   id: this.fileId, data: this.FileInfo  }
            if (this.res !== null) { //有缓存数据
                // console.log('有缓存直接用缓存不下载')
                if (this.preView) {
                   return this.fileView()
                }
                return this.fileDown(this.FileName)

            }
            servicesApi.downloadFiles(form).then(res => {
                // console.log('无缓存，去下载')
                // console.log(res)
                this.res = res
                // console.log(this.res)
                if (this.preView) {
                    return this.fileView()
                }
                return this.fileDown(this.FileName)
                // try {
                //     const blob = new Blob([res.data], {
                //         type: 'application/octet-stream'
                //     })
                //     const downloadElement = document.createElement('a')
                //     // 创建下载的链接
                //     // 兼容不同浏览器的URL对象
                //     const url = window.URL || window.webkitURL || window.moxURL;
                //     const href = url.createObjectURL(blob)
                //     console.log(url)
                //     console.log(href)
                //     downloadElement.href = href
                //     // 下载后文件名
                //     downloadElement.download = FileName
                //     document.body.appendChild(downloadElement)
                //     // 点击下载
                //     downloadElement.click()
                //     // 下载完成移除元素
                //     document.body.removeChild(downloadElement)
                //     // 释放掉blob对象
                //     url.revokeObjectURL(href)
                //     //编译文件完成后，进度条展示为100%100
                //     this.percentage = 100;
                //     //下载完成 可以重新点击按钮下载
                //     this.isDisabled = false;
                // } catch (error) {
                //     // console.log('下载的文件出错', error)
                // }

            }).catch(error => {
                // console.log('下载的文件出错', error)
                this.$message({
                    type: 'error',
                    message: '出错啦',
                });
            })
        }, 1000, { 'leading': true, 'trailing': false }),
    }

}
</script>
<style lang="">
    
</style>